<style>
    #businesses-homePage {
        padding: 20px 25px 25px 0;
    }
</style>

<div class="layui-fluid layui-anim febs-anim" id="businesses-homePage" lay-title="首页信息">
    <div class="layui-row febs-container">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <!--233网校-->
                    <form class="layui-form layui-table-form" id="233" lay-filter="school-table-form">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                            <legend style="font-size: 15px; font-weight: bolder;">233网校</legend>
                        </fieldset>
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div class="layui-form-item">

                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">导航图：</label>
                                        <div class="layui-upload">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" src="" id="img233" name="img233" width="200px" height="150px">
                                                <input type="hidden" id="myimg1" name="imgUrl233">
                                                <p id="demoText"></p >
                                            </div>
                                            <a id="upload233" style="padding-left: 110px">上传图片</a>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label febs-form-item-require">标题：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="txtTitle233" id="txtTitle233" minlength="2" maxlength="50" lay-verify="range|name"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">简介：</label>
                                        <div class="layui-input-block">
                                            <textarea name="txtIntro233" id="txtIntro233" maxlength="100" class="layui-textarea"></textarea>
                                            <div class="layui-inline" style="margin-left: 600px" >
                                                <input type="button" id="btnSave233" class="layui-btn layui-btn-normal " value="保存">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </form>

                    <!--英语课程-->
                    <form class="layui-form layui-table-form" lay-filter="english-table-form">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                            <legend style="font-size: 15px; font-weight: bolder;">学位英语</legend>
                        </fieldset>
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">导航图：</label>
                                    <div class="layui-upload">
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" src="" id="imgEng" name="imgEng" width="200px" height="150px">
                                            <input type="hidden" id="myimg2" name="imgUrlEng">
                                            <p id="demoText1"></p >
                                        </div>
                                        <a id="uploadEng" style="padding-left: 110px">上传图片</a>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">标题：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="txtTitleEnglish" id="txtTitleEnglish" minlength="2" maxlength="50" lay-verify="range|name"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">简介：</label>
                                    <div class="layui-input-block">
                                        <textarea name="txtIntroEnglish" id="txtIntroEnglish" maxlength="100" class="layui-textarea"></textarea>
                                        <div class="layui-inline" style="margin-left: 600px">
                                            <input type="button" id="btnSaveEng" class="layui-btn layui-btn-normal" value="保存">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>

                    <!--医学-->
                    <form class="layui-form layui-table-form" lay-filter="medicine-table-form">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                            <legend style="font-size: 15px; font-weight: bolder;">医学课程</legend>
                        </fieldset>
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">导航图：</label>
                                    <div class="layui-upload">
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" src="" id="imgMidcine" name="imgMidcine" width="200px" height="150px">
                                            <input type="hidden" id="myimg3" name="imgUrlMed">
                                            <p id="demoText2"></p >
                                        </div>
                                        <a id="uploadMedicine" style="padding-left: 110px">上传图片</a>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">标题：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="txtTitleMedcine" id="txtTitleMedcine" minlength="2" maxlength="50" lay-verify="range|name"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">简介：</label>
                                    <div class="layui-input-block">
                                        <textarea name="txtIntroMedcine" id="txtIntroMedcine" maxlength="100" class="layui-textarea"></textarea>
                                        <div class="layui-inline" style="margin-left: 600px">
                                            <input type="button" id="btnSaveMedcine" class="layui-btn layui-btn-normal" value="保存">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>

                    <!--课程-->
                    <form class="layui-form layui-table-form" lay-filter="course-table-form">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                            <legend style="font-size: 15px; font-weight: bolder;">精品课程</legend>
                        </fieldset>
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">导航图：</label>
                                    <div class="layui-upload">
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" src="" id="imgCourse" name="imgCourse" width="200px" height="150px">
                                            <input type="hidden" id="myimg4" name="imgUrlCourse">
                                            <p id="demoText3"></p >
                                        </div>
                                        <a id="uploadCourse" style="padding-left: 110px">上传图片</a>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label febs-form-item-require">标题：</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="txtTitleCourse" id="txtTitleCourse" minlength="2" maxlength="50" lay-verify="range|name"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">简介：</label>
                                    <div class="layui-input-block">
                                        <textarea name="txtIntroCourse" id="txtIntroCourse" maxlength="100" class="layui-textarea"></textarea>
                                        <div class="layui-inline" style="margin-left: 600px">
                                            <input type="button" id="btnSaveCourse"  class="layui-btn layui-btn-normal " value="保存">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>


<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'form', 'table', 'febs','upload'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            upload=layui.upload,
            dropdown = layui.dropdown,
            $view = $('#businesses-homePage'),
            $searchForm = $view.find('form'),
            tableIns;

        form.render();

        $.ajax({
            type:'get',
            url:'homePage/homeList',
            success:function (res) {
                //显示233网校的内容
                $("#txtTitle233").val(res.data[0].type);
                $("#txtIntro233").val(res.data[0].intro);
                $("#myimg1").val(res.data[0].imgUrl);
                //显示英语课程的内容
                $("#txtTitleEnglish").val(res.data[1].type);
                $("#txtIntroEnglish").val(res.data[1].intro);
                $("#myimg2").val(res.data[1].imgUrl);
                //显示医学课程的内容
                $("#txtTitleMedcine").val(res.data[2].type);
                $("#txtIntroMedcine").val(res.data[2].intro);
                $("#myimg2").val(res.data[2].imgUrl);
                //显示精品课程的内容
                $("#txtTitleCourse").val(res.data[3].type);
                $("#txtIntroCourse").val(res.data[3].intro);
                $("#myimg3").val(res.data[3].imgUrl);
            }
        })

        //1.图片上传233网校
        var uploadInst = upload.render({
            elem: '#upload233'
            ,url: ctx+'upload'
            ,method:'post'
            ,auto:false
            ,accept:'images'
            ,exts: 'jpg|png|gif|bmp|jpeg'
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                var flag = true;
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width <=700 && img.height <=560){
                            $('#img233').attr('src', result); //图片链接（base64）
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小必须小于750*560尺寸！");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            ,done: function(res){
                //上传成功
                if(res.code == 200){
                    layer.msg('上传图片成功');
                    $("#myimg1").val(res.url);
                    var url = $("#myimg1").val();
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //2.图片上传英语
        var uploadInst = upload.render({
            elem: '#uploadEng'
            ,url: ctx+'upload' //改成您自己的上传接口
            ,method:'post'
            ,auto:false
            ,accept:'images'
            ,exts: 'jpg|png|gif|bmp|jpeg'
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                var flag = true;
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width <=700 && img.height <=560){
                            $('#imgEng').attr('src', result); //图片链接（base64）
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小必须小于750*560尺寸！");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            ,done: function(res){
                //上传成功
                if(res.code == 200){
                    layer.msg('上传图片成功');
                    $("#myimg2").val(res.url);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //3.图片上传医学课程
        var uploadInst = upload.render({
            elem: '#uploadMedicine'
            ,url: ctx+'upload'
            ,method:'post'
            ,auto:false
            ,accept:'images'
            ,exts: 'jpg|png|gif|bmp|jpeg'
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                var flag = true;
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width <=700 && img.height <=560){
                            $('#imgMidcine').attr('src', result); //图片链接（base64）
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小必须小于750*560尺寸！");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            ,done: function(res){
                //上传成功
                if(res.code == 200){
                    layer.msg('上传图片成功');
                    $("#myimg3").val(res.url);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //4.图片上传精品课程
        var uploadInst = upload.render({
            elem: '#uploadCourse'
            ,url: ctx+'upload'
            ,method:'post'
            ,auto:false
            ,accept:'images'
            ,exts: 'jpg|png|gif|bmp|jpeg'
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                var flag = true;
                obj.preview(function(index, file, result){
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width <=700 && img.height <=560){
                            $('#imgCourse').attr('src', result); //图片链接（base64）
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小必须小于750*560尺寸！");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            ,done: function(res){
                //上传成功
                if(res.code == 200){
                    layer.msg('上传图片成功');
                    $("#myimg4").val(res.url);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //233保存按钮
        $("#btnSave233").click(function () {
            $.ajax({
                type:'post',
                url:'homePage/update',
                data:{id:1,title:$("#txtTitle233").val(),intro:$("#txtIntro233").val(),
                    imgUrl:$("#myimg1").val()},
                success:function (res) {
                    febs.alert.success(' 上传233网校信息信息成功');
                }
            })
        })
        //英语保存按钮
        $("#btnSaveEng").click(function () {
            console.log("555555")
            $.ajax({
                type:'post',
                url:'homePage/update',
                data:{id:2,title:$("#txtTitleEnglish").val(),intro:$("#txtIntroEnglish").val(),
                    imgUrl:$("#myimg2").val()},
                success:function (res) {
                    febs.alert.success(' 上传英语信息成功');
                }
            })
        })
        //医学保存按钮
        $("#btnSaveMedcine").click(function () {
            $.ajax({
                type:'post',
                url:'homePage/update',
                data:{id:3,title:$("#txtTitleMedcine").val(),intro:$("#txtIntroMedcine").val(),
                    imgUrl:$("#myimg3").val()},
                success:function (res) {
                    febs.alert.success(' 上传医学课程成功');
                }
            })
        })
        //精品课程保存按钮
        $("#btnSaveCourse").click(function () {
            $.ajax({
                type:'post',
                url:'homePage/update',
                data:{id:4,title:$("#txtTitleCourse").val(),intro:$("#txtIntroCourse").val(),
                    imgUrl:$("#myimg4").val()},
                success:function (res) {
                    febs.alert.success(' 上传精品课程成功');
                }
            })
        })

    })
</script>


